<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 添加 jQuery 引用 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>confirmOrder</title>
</head>

<body>
    <%= require('./common/header.htm')%>

        <div id="Content">
            <div id="BackLink">
                <a href="./catalog-main.html">
                    Return to Main Menu
                </a>
            </div>
            <div id="progressBar">
                <button>提交订单</button>
                <button>确认订单</button>
                <button>订单完成</button>
                <div>
                    <span></span>
                </div>
            </div>
            <div id="Catalog">
                <div id="orderStep2">
                    <p>
                        Please confirm the information below and then press continue...
                    </p>


                    <table>
                        <tr>
                            <th align="center" colspan="2">
                                <font size="4">
                                    <b>Order</b>
                                </font>
                                <br />
                                <font size="3">
                                    <b th:text="*{#dates.format(orderdate, 'yyyy/MM/dd hh:mm:ss')}" id="orderdate">
                                    </b>
                                </font>
                            </th>
                        </tr>

                        <tr>
                            <th colspan="2">Billing Address</th>
                        </tr>
                        <tr>
                            <td>First name:</td>
                            <td th:text="*{billtofirstname}" id="billtofirstname">
                            </td>
                        </tr>
                        <tr>
                            <td>Last name:</td>
                            <td th:text="*{billtolastname}" id="billtolastname">
                            </td>
                        </tr>
                        <tr>
                            <td>Address 1:</td>
                            <td th:text="*{billaddr1}" id="billaddr1">

                            </td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td th:text="*{billaddr2}" id="billaddr2">

                            </td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td th:text="*{billcity}" id="billcity">

                            </td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td th:text="*{billstate}" id="billstate">

                            </td>
                        </tr>
                        <tr>
                            <td>Zip:</td>
                            <td th:text="*{billzip}" id="billzip"></td>
                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td th:text="*{billcountry}" id="billcountry"></td>
                        </tr>
                        <tr>
                            <th colspan="2">Shipping Address</th>
                        </tr>
                        <tr>
                            <td>First name:</td>
                            <td th:text="*{shiptofirstname}" id="shiptofirstname">

                            </td>
                        </tr>
                        <tr>
                            <td>Last name:</td>
                            <td th:text="*{shiptolastname}" id="shiptolastname">

                            </td>
                        </tr>
                        <tr>
                            <td>Address 1:</td>
                            <td th:text="*{shipaddr1}" id="shipaddr1">

                            </td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td th:text="*{shipaddr2}" id="shipaddr2">

                            </td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td th:text="*{shipcity}" id="shipcity">

                            </td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td th:text="*{shipstate}" id="shipstate">

                            </td>
                        </tr>
                        <tr>
                            <td>Zip:</td>
                            <td th:text="*{shipzip}" id="shipzip">

                            </td>
                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td th:text="*{shipcountry}" id="shipcountry">

                            </td>
                        </tr>

                    </table>
                    <!-- <a  th:href="@{/order/pay(totalAmount=${session.order.totalPrice})}" > -->
                    <!-- <input type="submit" name="confirmed" value="confirmed">
        </a> -->
                    <input type="button" name="confirmed" value="confirmed" id="confirmed">
                    <div id="showHtml"></div>
                </div>
            </div>

        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#progressBar div').css('background', 'linear-gradient(to right, green 50%, green 50%)');
                $('#progressBar>button:nth-child(1)').css('background', 'green');
                $('#progressBar>button:nth-child(2)').css('background', 'green');
            });
        </script>
        <%= require('./common/footer.htm')%>
</body>

</html>